<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>无语义标签</h2>
    <div>我今天学了HTML</div>
    是为了做项目的
    <br>
    <span>我今天学了<span style="font-size: 20;color: red;">HTML</span></span>
    <form action="https://www.baidu.com/s" target="_blank"> 
        用户名：<input type="text" name="userName">
        <br>
        密&nbsp;&nbsp;码：<input type="password" name="niceName">

        <p></p>
        <h2>用户注册功能</h2>
        <table>
            <tr>
                <td>用户名</td>
                <td><input type="text" name="wd"  maxlength="10"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" name="niceName"></td>
            </tr>
            <tr>
                <td>性别</td>
                <td><input id="man" type="radio" name="sex" value="男">
                    <label for="man">男</label>
                    &nbsp;&nbsp;
                    <input type="radio" name="sex" checked="checked" value="女">女
                </td>
            </tr>

            <tr>
                <td>爱好</td>
                <td>
                    <input type="checkbox" checked="checked" >吃饭
                    &nbsp;&nbsp;
                    <input type="checkbox">美甲
                    &nbsp;&nbsp;
                    <input type="checkbox">喝酒
                </td>
            </tr>

            <tr>
                <td>所在城市</td>
                <td>
                    <select>
                        <option>北京</option>
                        <option>上海</option>
                        <option selected="selected">西安</option>
                    </select>
                </td>

            </tr>

            <tr>
                <td>个人介绍</td>
                <td>
                    <textarea rows="10" cols="60"></textarea>
                </td>
            </tr>
            <tr>
                <td></td>
                <td colspan="2">
                    <input type="button" value="普通按钮" onclick="alert('确认提交吗');">
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="submit" value="提交按钮">
                </td>
                <td>
                    <input type="reset" value="清空">
                </td>
            </tr>
        </table>
    </form>

    <h2>计算器</h2>
    数值1：<input type="text" id="ipt_num1"><br>
    数值2：<input type="text" id="ipt_num2"><br>
    <input type="button" value="相加" onclick="mycalc()">
    <p></p>
        <div id="resultDiv">

        </div>
    

    <script>
         function mycalc(){
            //1.得到第一个输入框的值
            var num1=document.getElementById("ipt_num1").value;
            // alert(num1);
            //2.得到第二个输入框的值
            var num2=document.getElementById("ipt_num2").value;
            // alert(num2);
            //3.让输入框1的值 + 输入框2的值，并弹出结果
            // alert("相加结果："+(parseInt(num1)+parseInt(num2)));
            document.getElementById("resultDiv").innerText="相加的结果："+(parseInt(num1)+parseInt(num2));
            // document.getElementById("resultDiv").innerHTML="相加的结果：<span style='color=red;font-size:30px;'>"+(parseInt(num1)+parseInt(num2))+"<span>";
           
        }  
    </script>
</body>
</html>